<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home</title>

    <script src="../public/vue/dist/vue.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="../public/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="../public/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="../public/bootstrap/dist/js/bootstrap.min.js"></script>


    <link rel="stylesheet" href="../public/summernote/dist/summernote.css">

    <script src="../public/summernote/dist/summernote.js"></script>
    <script src="../public/summernote/dist/lang/summernote-zh-CN.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>



    <div class="container" id="blogApp">



        <div class="row">

            <button type="button" @click="fnTest" class="btn btn-primary">test</button>
            <table class="table">

                <thead>
                    <tr>
                        <th>替换前</th>
                        <th>替换后</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>

                    <tr v-for="(item, index) in keywordArr" :key="index">
                        <td>
                            <input type="text" class="form-control" v-model="item.before" placeholder="请输入名称">
                        </td>
                        <td>
                            <input type="text" class="form-control" v-model="item.after" placeholder="请输入名称">
                        </td>
                        <td>

                            <button type="button" @click="fnAddRow" class="btn btn-primary">add</button>
                            <button type="button" @click="fnRemoveRow(index)" class="btn btn-danger">remove</button>

                        </td>
                    </tr>
                </tbody>
            </table>

            <form class="form-horizontal" role="form">

                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">text</label>
                    <div class="col-sm-10">

                        <textarea class="form-control" v-model="source" cols="60" rows="10"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">result</label>
                    <div class="col-sm-10">

                        <textarea class="form-control" v-model="result" cols="60" rows="10"></textarea>
                    </div>
                </div>

            </form>



        </div>



    </div>


</body>

</html>

<script>

    var vm = new Vue({
        el: '#blogApp',
        data: {
            source: '',
            result: '',
            keywordArr: [{}],
            blog: {},
            bookList: []
        },
        methods: {

            fnAddRow() {

                this.keywordArr.push({});

            },
            fnRemoveRow(indx) {

                this.keywordArr.splice(indx, 1);

            },

            fnTest() {

                var kw = this.keywordArr

                // kw.forEach(element => {
                //     if (!element.before || !element.after) {
                //         alert('no key word')
                //     }
                // });

                for (var i = 0; i < kw.length; i++) {
                    var ele = kw[i]
                    if (!ele.before || !ele.after) {
                        alert('no key word')
                        return false;
                    }
                }
                var that = this.source
                // console.log(that)
                for (var i = 0; i < kw.length; i++) {
                    var key = kw[i];
                    that = that.replace(new RegExp(key.before,'g'), key.after)
                    // console.log(that)
                }

                this.result = that
            },

            all: function () {

                var _self = this;
                $.ajax({
                    crossDomain: true,
                    type: "get",
                    url: "http://localhost:9000/edoCate/all",
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        if (response.code == 0) {

                            _self.bookList = response.dat;
                            console.log(response);
                        }

                    }
                });
            }
        },
        mounted() {

        }
    })
</script>